﻿<!DOCTYPE html>
<html>
<head>
    <title> ZTREE DEMO - drag with other DOM</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
    <!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>-->
    <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
    <link href="dargnew.css" rel="stylesheet" />

    <script type="text/javascript">
		<!--
		var setting = {
			edit: {
				drag: {
					autoExpandTrigger: true,
					prev: dropPrev,
					inner: dropInner,
					next: dropNext
				},
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeDragOpen: beforeDragOpen,
				onDrag: onDrag,
				onDrop: onDrop,
				onExpand: onExpand
			},
			view: {
			    selectedMulti: false,
			    dblClickExpand: false,
			    showIcon: false,
			    nameIsHTML: true,
			    fontCss: { color: "#ff0011", background: "#5cb85c" }
			}
		};
        
		var zNodes =[
			{ a: "b", id: 1, pId: 0, name: "随意拖拽 1", open: true },
			{ a: "b", id: 11, pId: 1, name: "随意拖拽 1-1", open: true },
			{ a: "b", id: 12, pId: 1, name: "随意拖拽 1-2", open: true },
			{ a: "b", id: 121, pId: 12, name: "随意拖拽 1-2-1" },
			{ a: "b", id: 122, pId: 12, name: "随意拖拽 1-2-2" },
			{ a: "b", id: 123, pId: 12, name: "随意拖拽 1-2-3" },
			{ a: "b", id: 13, pId: 1, name: "禁止拖拽 1-3", open: true, drag: false },
			{ a: "b", id: 131, pId: 13, name: "禁止拖拽 1-3-1", pen: true, drag: false },
			{ a: "b", id: 132, pId: 13, name: "禁止拖拽 1-3-2", pen: true, drag: false },
			{ a: "b", id: 132, pId: 13, name: "禁止拖拽 1-3-3", pen: true, drag: false },
			{ a: "b", id: 2, pId: 0, name: "禁止子节点移走 2", open: true, childOuter: false },
			{ a: "b", id: 21, pId: 2, name: "我不想成为父节点 2-1", dropInner: false },
			{ a: "b", id: 22, pId: 2, name: "我不要成为根节点 2-2", dropRoot: false },
			{ a: "b", id: 23, pId: 2, name: "拖拽试试看 2-3" },
			{ a: "b", id: 3, pId: 0, name: "禁止子节点排序/增加 3", open: true, childOrder: false, dropInner: false },
			{ a: "b", id: 31, pId: 3, name: "随意拖拽 3-1" },
			{ a: "b", id: 32, pId: 3, name: "随意拖拽 3-2" },
			{ a: "b", id: 33, pId: 3, name: "随意拖拽 3-3" }
		];

		function dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropNext(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}

		var log, className = "dark", curDragNodes, autoExpandNode;
		function beforeDrag(treeId, treeNodes) {

		    console.log("beforeDrag");
		    console.log(treeId);
		    console.log(treeNodes);
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeDrag ]&nbsp;&nbsp;&nbsp;&nbsp; drag: " + treeNodes.length + " nodes." );
			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
					curDragNodes = null;
					return false;
				}
			}
			curDragNodes = treeNodes;
			return true;
		}
		function beforeDragOpen(treeId, treeNode) {
			autoExpandNode = treeNode;
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
		    console.log("beforeDrop");
		    console.log(treeId);
		    console.log(treeNodes);
		    console.log(targetNode);
		    console.log(moveType);
		    console.log(isCopy);

			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeDrop ]&nbsp;&nbsp;&nbsp;&nbsp; moveType:" + moveType);
			showLog("target: " + (targetNode ? targetNode.name : "root") + "  -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"));
			return true;
		}
		function onDrag(event, treeId, treeNodes) {
		    console.log("onDrag");
		    console.log(treeId);
		    console.log(treeNodes);
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" onDrag ]&nbsp;&nbsp;&nbsp;&nbsp; drag: " + treeNodes.length + " nodes." );
		}
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" onDrop ]&nbsp;&nbsp;&nbsp;&nbsp; moveType:" + moveType);
			showLog("target: " + (targetNode ? targetNode.name : "root") + "  -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"))
		}
		function onExpand(event, treeId, treeNode) {
			if (treeNode === autoExpandNode) {
				className = (className === "dark" ? "":"dark");
				showLog("[ "+getTime()+" onExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
			}
		}

		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		function setTrigger() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#callbackTrigger").bind("change", {}, setTrigger);
		});
		//-->
    </script>

</head>
<body>
    <h1>与其他 DOM 拖拽互动</h1>
    <h6>[ 文件路径: super/dragWithOther.html ]</h6>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="right">
            <ul class="info">
                <li class="title">
                    <h2>实现方法说明</h2>
                    <ul class="list">
                        <li>zTree v3.2 版本修正了 onDrag/onDrop 中的 event 对象; v3.5.16 版本增加了 onDragMove; 因此可以较容易的控制将节点拖拽到其他 DOM </li>
                        <li class="highlight_red">将其他 DOM 拖拽到 zTree 需要自己制作相关的拖拽代码</li>
                        <li class="highlight_red">这仅仅是一个最简单的演示，如果需要更炫的效果，需要制作更复杂的代码</li>
                    </ul>
                </li>
                <li class="title">
                    <h2>请拖拽下面内容到 树节点上</h2>
                    <div class="domBtnDiv">
                        <div id="dom_1" class="categoryDiv"><span class="domBtn" domid="11">大树</span><span class="domBtn" domid="12">小草</span><span class="domBtn" domid="13">花朵</span></div>
                        <div class="dom_line"></div>
                        <div id="dom_2" class="categoryDiv"><span class="domBtn" domid="21">老虎</span><span class="domBtn" domid="22">狗熊</span><span class="domBtn" domid="23">狮子</span></div>
                    </div>
                    <span class="highlight_red">也可以把二级节点拖拽到以上图层 </span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>